<template>
    <div class="upload-container">
        <el-card class="upload-card">
            <template #header>
                <div class="card-header">
                    <span>文件上传</span>
                </div>
            </template>

            <!-- 文件上传区域 -->
            <el-upload
                class="upload-area"
                drag
                :action="null"
                :auto-upload="false"
                :on-change="handleFileChange"
                :show-file-list="true"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    拖拽文件到此处或 <em>点击上传</em>
                </div>
            </el-upload>

            <!-- 上传按钮 -->
            <div class="upload-actions">
                <el-button 
                    type="primary" 
                    :loading="uploading"
                    @click="handleUpload"
                    :disabled="!selectedFile"
                >
                    开始上传
                </el-button>
            </div>

            <!-- 上传进度显示 -->
            <div class="upload-progress" v-if="uploading">
                <el-progress 
                    :percentage="uploadProgress"
                    :status="uploadStatus"
                />
            </div>

            <!-- 上传结果显示 -->
            <div class="upload-result" v-if="uploadResult">
                <el-alert
                    :title="uploadResult.message"
                    :type="uploadResult.type ? 'success' : 'error'"
                    show-icon
                />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { uploadFile } from '@/api/upload'
import { ElMessage } from 'element-plus'

// 状态变量
const selectedFile = ref(null)
const uploading = ref(false)
const uploadProgress = ref(0)
const uploadStatus = ref('')
const uploadResult = ref(null)

// 处理文件选择
const handleFileChange = (file) => {
    selectedFile.value = file.raw
    uploadProgress.value = 0
    uploadResult.value = null
}

// 处理文件上传
const handleUpload = async () => {
    if (!selectedFile.value) {
        ElMessage.warning('请先选择文件')
        return
    }

    try {
        uploading.value = true
        uploadStatus.value = ''
        

        // 模拟上传进度
        const progressInterval = setInterval(() => {
            if (uploadProgress.value < 90) {
                uploadProgress.value += 10
            }
        }, 300)

        // 调用上传 API
        const result = await uploadFile(selectedFile.value)

        // 上传完成
        clearInterval(progressInterval)
        uploadProgress.value = 100
        uploadStatus.value = 'success'
        
        uploadResult.value = {
            type: true,
            message: '文件上传成功！'
        }

        ElMessage.success('上传成功')

    } catch (error) {

            uploadStatus.value = 'exception'
            uploadResult.value = {
            type: false,
            message: '上传失败：' + error.message
    }
    } finally {
        uploading.value = false
    }
}
</script>

<style scoped>
.upload-container {
    padding: 20px;
}

.upload-card {
    max-width: 600px;
    margin: 0 auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-area {
    margin: 20px 0;
}

.upload-actions {
    margin-top: 20px;
    text-align: center;
}

.upload-progress {
    margin-top: 20px;
}

.upload-result {
    margin-top: 20px;
}

.el-upload__text {
    margin-top: 10px;
}

.el-upload__text em {
    color: #409EFF;
    font-style: normal;
}
</style>